<!DOCTYPE html>
<html lang="zh-CN">
<head>
@@include('../../layout/header.html', {
    "title"     : "Betterlife Front UI",
    "rel-prefix": "../.."
})
</head>
<body>
    <!-- main nav begin -->
@@include('../../layout/navbar.html', {
    "rel-prefix": "../.."
})
    <!-- /main nav end -->

    <!-- page container begin -->
    <div class="page-container blog">
      <!-- page content begin -->
      <div class="page-content">
        <div id="sidebar" class="sidebar page-sidebar"></div>
        <!-- main content begin -->
        <div class="content-wrapper">
          <div class="main-content">
            <!-- content area begin -->
            <div class="container-fluid">
              <div class="main-header" style="background-image: url('../../images/beauty.jpg')">
                  <div class="head-container">
                    <h1 class="header-title">展现自我 &amp; 好奇发现<br>Creative Work</h1>
                  </div>
              </div>
              <div class="content-container">
                <div id="top-panel">
                  <div id="top-menus" class="top-menus" style="height: 60px;">
                    <div class="menu-navs">
                      <ul class="menu-nav-container" style="position: relative;">
                        <li class="menu-nav active">
                          <a class="menu-nav-link" href="../../html/blog/index.html"> 热点(火炎焱燚) </a>
                        </li>
                        <li class="menu-nav">
                          <a class="menu-nav-link" href="../../html/blog/index.html"> 电影 </a>
                        </li>
                        <li class="menu-nav">
                          <a class="menu-nav-link" href="../../html/blog/index.html"> 音乐(口吅品㗊) </a>
                        </li>
                        <li class="menu-nav">
                          <a class="menu-nav-link" href="../../html/blog/index.html"> 科技 </a>
                        </li>
                      </ul>
                    </div>
                  </div>
                </div>

                <div class="unit-list row">
                  <!-- 单元的模版
                  <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
                    <div class="unit-box">
                      <div class="img-box">
                        <img src="https://lorempixel.com/900/500?r=1" alt="美图">
                      </div>
                      <div class="title-box">
                        <h2>只为更好的标题</h2>
                        <p>前端技术</p>
                      </div>
                      <div class="suffix-box">
                        <ul>
                          <li>skygreen</li>
                          <li>2018-01-07</li>
                          <li><i class="fa fa-eye"></i>30</li>
                        </ul>
                      </div>
                    </div>
                  </div> -->
                </div>
                <div class="btn-load-more row">
                  <button type="button" name="button">加载更多</button>
                </div>
              </div>
            </div>
            <!-- /content area end -->
          </div>
        </div>
        <!-- /main content end -->
        <div class="clearfix"></div>
      </div>
      <!-- /page content end -->
    </div>
    <!-- /page container end -->

    <!-- footer begin -->
    @@include('../../layout/footer.html',{
      "rel-prefix": "../.."
    })
    <!-- /footer end -->
    <!-- template begin -->
    <script id="unitTmpl" type="text/x-jsrender">
      <div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">
        <div class="unit-box">
          <div class="img-box">
            <img src="../../images/beauty.jpg" onload="this.src='{{:img_src}}';" onerror="this.src='../../images/beauty.jpg';" alt="{{:title}}">
          </div>
          <div class="title-box">
            <h2>{{:title}}</h2>
            <p>{{:category}}</p>
          </div>
          <div class="suffix-box">
            <ul>
              <li>{{:author}}</li>
              <li>{{:publishTime}}</li>
              <li><i class="fa fa-eye"></i>{{:countSee}}</li>
            </ul>
          </div>
        </div>
      </div>
    </script>
    <!-- /template end -->
    <script src="../../js/core/blog.js"></script>
</body>
</html>
